{% extends "base.html" %}
{% load static %}
{% block title %}美食体验 - 风之宿{% endblock %}

{% block content %}
<!-- 页面头部 -->
<section class="py-16 bg-primary/10">
  <div class="container mx-auto px-4">
    <div class="text-center">
      <h1 class="text-4xl font-serif font-bold text-primary mb-4">美食体验</h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        {% if page_contents %}{{ page_contents.description }}{% else %}我们的厨师团队精选当地最新鲜的时令食材，结合传统烹饪技艺，为您呈现地道的日式料理。{% endif %}
      </p>
    </div>
  </div>
</section>

<!-- 主要介绍 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <div class="flex flex-col lg:flex-row items-center gap-12">
      <div class="lg:w-1/2">
        <img src="{% static 'images/ryouri3.jpg' %}" alt="怀石料理" class="w-full rounded-lg shadow-lg">
      </div>
      <div class="lg:w-1/2">
        <h2 class="text-3xl font-serif font-bold text-primary mb-6">传统怀石料理</h2>
        <div class="space-y-4 text-gray-700 leading-relaxed">
          <p>
            怀石料理是日本饮食文化的精髓，强调季节性和食材的原味。
            我们的厨师团队深谙传统烹饪技艺，每一道菜品都经过精心设计和制作。
          </p>
          <p>
            我们坚持使用当地最新鲜的时令食材，从山间的野菜到溪流中的鲜鱼，
            每一道菜都体现了大自然的恩惠和季节的变迁。
          </p>
          <p>
            用餐不仅是味觉的享受，更是一场视觉和心灵的盛宴。
            精致的摆盘、讲究的器皿，都体现了我们对传统美学的尊重。
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 菜品展示 -->
<section class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">特色菜品</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white rounded-lg overflow-hidden shadow-lg">
        <div class="h-48 overflow-hidden">
          <img src="{% static 'images/ryouri2.jpg' %}" alt="季节前菜" class="w-full h-full object-cover">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold text-primary mb-2">季节前菜</h3>
          <p class="text-gray-600 mb-4">精选当季最新鲜的山野菜和时蔬，搭配特制酱料，开启味蕾之旅。</p>
          <div class="flex justify-between items-center">
            <span class="text-accent font-semibold">春季限定</span>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg overflow-hidden shadow-lg">
        <div class="h-48 overflow-hidden">
          <img src="../static/images/food1.jpg" alt="刺身拼盘" class="w-full h-full object-cover">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold text-primary mb-2">刺身拼盘</h3>
          <p class="text-gray-600 mb-4">每日从附近渔港直送的新鲜海产，展现食材最纯粹的美味。</p>
          <div class="flex justify-between items-center">
            <span class="text-accent font-semibold">每日新鲜</span>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg overflow-hidden shadow-lg">
        <div class="h-48 overflow-hidden">
          <img src="../static/images/food2.jpg" alt="炭火烧烤" class="w-full h-full object-cover">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold text-primary mb-2">炭火烧烤</h3>
          <p class="text-gray-600 mb-4">选用当地和牛和山鸡，用传统炭火慢烤，锁住肉质的鲜美。</p>
          <div class="flex justify-between items-center">
            <span class="text-accent font-semibold">招牌菜品</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 菜单示例 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">晚餐菜单示例</h2>

    <div class="max-w-4xl mx-auto">
      <div class="bg-neutral rounded-lg p-8">
        <div class="text-center mb-8">
          <h3 class="text-2xl font-serif font-semibold text-primary">春季怀石料理套餐</h3>
          <p class="text-gray-600">感受春天的气息，品味大自然的馈赠</p>
        </div>

        <div class="space-y-6">
          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-lg font-semibold text-primary mb-2">先付</h4>
            <p class="text-gray-600">山菜拌豆腐、樱花虾、春笋</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-lg font-semibold text-primary mb-2">向付</h4>
            <p class="text-gray-600">季节刺身三种盛合：鲷鱼、金枪鱼、甜虾</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-lg font-semibold text-primary mb-2">煮物</h4>
            <p class="text-gray-600">鲷鱼头汤煮、春季蔬菜</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-lg font-semibold text-primary mb-2">烧物</h4>
            <p class="text-gray-600">炭烤和牛、岩盐、山椒</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-lg font-semibold text-primary mb-2">扬物</h4>
            <p class="text-gray-600">天妇罗：樱花虾、芦笋、香菇</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-lg font-semibold text-primary mb-2">食事</h4>
            <p class="text-gray-600">鲷鱼茶泡饭、香物三种</p>
          </div>

          <div>
            <h4 class="text-lg font-semibold text-primary mb-2">水物</h4>
            <p class="text-gray-600">草莓大福、抹茶</p>
          </div>
        </div>

        <div class="mt-8 text-center">
          <p class="text-gray-600">菜单会根据季节和食材供应情况调整</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 早餐体验 -->
<section class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <div class="flex flex-col lg:flex-row-reverse items-center gap-12">
      <div class="lg:w-1/2">
        <img src="{% static 'images/ryouri4.jpg' %}" alt="日式早餐" class="w-full rounded-lg shadow-lg">
      </div>
      <div class="lg:w-1/2">
        <h2 class="text-3xl font-serif font-bold text-primary mb-6">传统日式早餐</h2>
        <div class="space-y-4 text-gray-700 leading-relaxed">
          <p>
            一日之计在于晨，我们的传统日式早餐为您开启充满活力的一天。
            烤鱼、味噌汤、米饭、纳豆、玉子烧等经典菜品一应俱全。
          </p>
          <p>
            所有食材均为当地采购，确保新鲜和品质。
            我们还提供西式早餐选择，满足不同客人的需求。
          </p>
          <p>
            早餐可在餐厅享用，也可送至客房，让您在私密的空间中悠闲开始新的一天。
          </p>
        </div>

        <div class="mt-6 bg-white rounded-lg p-4">
          <h4 class="font-semibold text-primary mb-2">早餐时间</h4>
          <p class="text-gray-600">7:00 - 9:30（最后点餐时间 9:00）</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 饮品选择 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">饮品选择</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
      <div>
        <h3 class="text-2xl font-semibold text-primary mb-6">日本酒</h3>
        <div class="space-y-4">
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">大吟酿 - 山田锦</span>
            <span class="font-semibold text-accent">¥1,200</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">纯米酒 - 五百万石</span>
            <span class="font-semibold text-accent">¥800</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">本酿造 - 美山锦</span>
            <span class="font-semibold text-accent">¥600</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">地酒 - 当地特色</span>
            <span class="font-semibold text-accent">¥500</span>
          </div>
        </div>
      </div>

      <div>
        <h3 class="text-2xl font-semibold text-primary mb-6">无酒精饮品</h3>
        <div class="space-y-4">
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">特制抹茶</span>
            <span class="font-semibold text-accent">¥400</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">手工梅汁</span>
            <span class="font-semibold text-accent">¥350</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">季节水果汁</span>
            <span class="font-semibold text-accent">¥300</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-200 pb-2">
            <span class="text-gray-700">本地矿泉水</span>
            <span class="font-semibold text-accent">¥200</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 预订提醒 -->
<section class="py-16 bg-primary text-white">
  <div class="container mx-auto px-4 text-center">
    <h2 class="text-3xl font-serif font-bold mb-4">体验传统日式美食</h2>
    <p class="text-xl mb-8 max-w-2xl mx-auto">
      我们的料理需要提前准备最新鲜的食材，请务必在预订时告知饮食偏好和忌口。
    </p>
    <a href="{% url 'contact' %}" class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-gray-100 transition-all text-lg font-semibold inline-block">
      咨询详情
    </a>
  </div>
</section>
{% endblock %}